<template>
	<view class="CartContainer">
		<view class="Cartgoods">
			<view class="goodsItem" v-for="Cartgoods in cartData" :key="Cartgoods.gid">
				<view class="ItemBtn" v-if="Cartgoods.isChecked" @click="changeisCheck(Cartgoods)">
					<image src="../../static/images/gougou.png"></image>
				</view>
				<view class="ItemBtn" v-else @click="changeisCheck(Cartgoods)">
					<image src="../../static/images/yuan.png"></image>
				</view>
				<view class="ItemImgBox" @click="toshopList">
					<image :src="Cartgoods.photo"></image>
				</view>
				<view class="ItemdesBox">
					<view class="desBox1">{{Cartgoods.subject}}</view>
					<view class="desBox2"></view>
					<view class="desBox3">
						<view class="desPrice">￥{{Cartgoods.sale_price*Cartgoods.count}}</view>
						<view class="AddOrReduce">
							<view class="Reduce" @click="changeNum(Cartgoods,-1,index)">-</view>
							<view class="SR">{{Cartgoods.count}}</view>
							<view class="Add" @click="changeNum(Cartgoods,1,index)">+</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="CartBottom">
			<view class="BottomBtn" @click='checkAll()' v-if="isCheckAll">
				<image src="../../static/images/gougou.png"></image>
			</view>
			<view class="BottomBtn" @click='checkAll()' v-else>
				<image src="../../static/images/yuan.png"></image>
			</view>
			<view class="ADD">
				<viwe class="ADDtext">合计</viwe>
				<view class="ADDprice">￥{{checkPrice}}</view>
			</view>
			<view class="BottomBox">
				<view class="BottomBoxPre">优惠{{PrePrice - checkPrice}}元</view>
			</view>
			<view class="settlementBox">
				<view class="settlement">去结算({{allNum}})</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				
			};
		},
		methods:{
			//点击跳转到商品详情页
			todetail(){
				wx.navigateTo({
					url:'/pages/detail/detail'
				})
			},
			//点击增加或者减少商品数量
			changeNum(Cartgoods,Num,index){
				Cartgoods.count+=Num
				if(Cartgoods.count<1){
					//如果数量小于1，弹框提示是否删除这一项，确认就删除，取消就让数量=1，Cartgoods.count=1
					wx.showModal({
					  title: '提示',
					  content: `您是否确认删除${Cartgoods.subject}`,
					  success:(res)=> {
					    if (res.confirm) {
					      console.log('用户点击确定')
						  // console.log('this.cartData',this.cartData);
						  this.cartData.splice(index,1)
						  // console.log('this.cartData1',this.cartData);
					    } else if (res.cancel) {
					      console.log('用户点击取消')
							Cartgoods.count=1
					    }
					  }
					})
				}
			},
			//点击单个选中
			changeisCheck(Cartgoods){
				// console.log("cartData.isChecked",this.cartData);
				Cartgoods.isChecked=!Cartgoods.isChecked
			},
			//点击全选
			checkAll(){
				this.isCheckAll=!this.isCheckAll
			}
			
		},
		computed:{
			...mapState({
				cartData:state=>state.cart.cartData
			}),
			//是否全选
			isCheckAll:{
				get(){
					return this.cartData.every(item=>item.isChecked)
				},
				//set只是对对数据进行了监视，数据变化之后的回调就是set
				set(newValue){
					return this.cartData.forEach(item=>item.isChecked=newValue)
				}
			},
			//计算合计（售卖的）
			checkPrice(){
				return this.cartData.reduce((prev,item)=>{
					if(item.isChecked){
						prev+=item.sale_price*item.count
					}
					return prev
				},0)
			},
			//计算优惠 （原价）
			PrePrice(){
				return this.cartData.reduce((prev,item)=>{
					if(item.isChecked){
						prev+=item.market_price*item.count
					}
					return prev
				},0)
			},
			//计算数量
			allNum(){
				return this.cartData.reduce((prev,item)=>{
					if(item.isChecked){
						prev+=item.count
					}
					return prev
				},0)
			}
		}
	}
</script>

<style lang="stylus">
	.CartContainer
		width 100%
		height 100%
		.Cartgoods
			width 100%
			height 296rpx
			// background-color #00A200
			display flex
			flex-direction column
			.goodsItem
				width 986rpx
				height 224rpx
				margin 20rpx
				// background-color #ff2773
				display flex
				.ItemBtn
					width 60rpx
					height 224rpx
					// background-color #183aff
					image
						width 40rpx
						height 40rpx
						margin-top 80rpx
				.ItemImgBox
					width 180rpx
					height 180rpx
					margin-right 30rpx
					image
						width 180rpx
						height 180rpx
						margin 20rpx
				.ItemdesBox
					width 500rpx
					height 224rpx
					// background-color #aaffff
					margin-left 20rpx
					.desBox1
						width 450rpx
						height 62rpx
						margin 40rpx 0 
					.desBox2
						width 480rpx
						height 20rpx
						margin 10rpx
					.desBox3
						width 480rpx
						height 40rpx
						display flex
						.desPrice
							width 300rpx
							height 40rpx
						.AddOrReduce
							width 176rpx
							height 40rpx
							// background-color #ffff00
							display flex
							margin-right 60rpx
							.Reduce
								width 33.33333%
								height 36rpx
								border-top-left-radius 16rpx
								border-bottom-left-radius 16rpx
								// background-color #007AFF
								text-align center
								line-height 36rpx
								border 1rpx solid #333333
							.SR
								width 33.33333% 
								height 36rpx
								text-align center
								line-height 36rpx
								border 1rpx solid #333333
							.Add
								width 33.33333%
								height 36rpx
								border-top-right-radius 16rpx
								border-bottom-right-radius 16rpx
								// background-color #007AFF
								text-align center
								line-height 36rpx
								border 1rpx solid #333333
		.CartBottom
			width 100%
			height 100rpx
			// background-color #2a34c5
			position absolute
			bottom 0
			left 0
			display flex
			.BottomBtn
				width 70rpx
				height 100rpx
				image
					width 40rpx
					height 40rpx
					margin 20rpx
			.ADD
				width 230rpx
				height 52rpx
				// background-color #1bff0f
				display flex
				margin 20rpx
				.ADDtext
					width 70rpx
					height 38rpx
				.ADDprice
					width 108rpx
					height 42rpx
					color #ff0000
					font-size 35rpx
			.BottomBox
				width 200rpx
				height 100%
				// background-color #ff0000
				.BottomBoxPre
					width 200rpx
					height 42rpx
					margin-top 20rpx
					margin-left 20rpx
					color #ff0000
					// background-color #1BFF0F
			.settlementBox
				.settlement
					width 160rpx
					height 42rpx
					margin 20rpx
					border-radius 20rpx
					text-align center
					color #ffffff
					background-color #41c856
</style>	
